JSP 工作上常用到的方法，特別發文紀錄一下。
這次的工作室要做 倉庫的實際盤點工作，
這小段代碼是要把一些 "物品的儲存位置" (簡稱儲位) 列出來
把這些儲位資料庫抓到後顯示在jsp上變成一個個按鈕，讓倉庫的工作人員可以根據網頁畫面點選，進行實際盤點貨物數量。

//當tab1 的 [ 選擇批次 ] 內容顯示出找到的資料ROW 而且在第一頁的 資料 出現了 按鈕 [ 執行盤點 ]

function tab2Qry(fileID) {  
	$.ajax({ 
		type: "POST",
		url: "listXXXXUpload", //上傳list相關的 Controller URL方法
		async: true, //異步
		cache: false,
		data: {fileID: fileID}, //經由fileID 的輸入可以帶出這一批要查的物品們在那些儲位
		success: function( data ) {
            console.log(data);
			//產生list 假設這裡有抓出來location資料從DB 目標table，資料庫內已存放詳細數據
			var locations = '';//將先前的資料清空
            //遍歷對每個元素進行
			$.each(data.result, function(index, uploadCount) {
				//console.log(uploadCount);
				//呼叫方法tab2KeyLocation:
				locations += '<button class="ui-button ui-corner-all" onclick =	"tab2KeyLocation(\''+this.location+'\',\''+this.effectiveFlag+'\');">' + uploadCount.location + '</button>';
			});
			$('#location-display').html(locations); //將資料賦值進去位置
		}
	});
}

解釋：

1. 函式 tab2Qry 接受 fileID 作為參數。

2. 它使用 jQuery 的 $.ajax() 方法向伺服器發送 AJAX POST 請求。請求的 URL 是 "listXXXXUpload"。

3. 請求的 data 物件包含了 fileID 參數。

4. 在 AJAX 請求成功時，會執行 success 回調函式，並將回傳的 data 傳入。

5. 在 success 回調函式內部，locations 變數被初始化為空字串。

6. $.each() 函式遍歷 data.result 陣列中的每一項。對於每一項，它生成一個 HTML 按鈕元素並附加到 locations 字串中。

7. 生成的按鈕具有 onclick 屬性，該屬性呼叫 tab2KeyLocation 函式並傳入兩個參數：location 和 effectiveFlag。
   這邊location 是儲位 如圖片 A1234 ; effectiveFlag是貨品的有效日期(例如肉鬆不開罐可放兩年~2025)

8. 最後，將包含生成的按鈕的 locations 字串，使用 html() 方法指派給具有 ID 為 'location-display' 的 HTML 元素。

9. 總的來說，這個函式根據從伺服器返回的資料動態生成按鈕並顯示在指定的 HTML 元素中。假設 tab2KeyLocation 函式在程式碼的其他地方定義，用於處理生成按鈕的點擊事件。
   
   介紹代碼內提到的tab2KeyLocation 函式

function tab2KeyLocation(location, effectiveFlag) {
     alert(location) //web測試 用來檢查是否有抓到資料,有抓到會跳出警示視窗寫location's value
	 alert(effectiveFlag) //web測試 用來檢查是否有抓到資料,有抓到會跳出警示視窗寫 effectiveFlag's value
	$('#location-tableDis').html(location);//放入中間的表格,如圖
	$('#effectiveFlag-tableDis').text(effectiveFlag);//放入中間的表格,如圖

這裡簡單把web頁面上的資料做移動帶入，參數是1.location是儲位 2.effectiveFlag是物品的效用期限例如 此商品保存期限為2年從2023到 2025-12-31。